<template>
  <div class="app-flex app-column app-height-100vh pb-4" style="background: #e6e6e6;overflow-y: auto;overflow-x: hidden;">
    <div class="py-2 app-hv-center px-3 app-no-grow-shrink">
      <img class="app-fill-width" :src="require('@/assets/ttt/logo.png')" alt="">
    </div>
    <div class="app-h-around px-3 app-no-grow-shrink" style="color: white">
      <div class="app-flex-1 app-round-2 mr-2 pl-4 py-3" style="background: #3078fc">
        <div class="app-font-14 pb-1">活动主题</div>
        <div class="app-font-16" style="font-family: 黑体">
          {{ activityInfo.name }}
        </div>
      </div>
      <div class="app-col-5 app-round-2 pl-4 py-3" style="background: #fe9e14">
        <div class="app-font-14 pb-1">活动结束时间</div>
        <div class="app-font-16 font-weight-bold">{{ activityInfo && activityInfo.endTime && activityInfo.endTime.replace('-','年').replace('-','月') }}日</div>
      </div>
    </div>
    <div class="py-4 mx-3 app-round-2 app-font-12 px-3 mt-2 app-flex app-no-grow-shrink" style="background: #3079fc;color: white">
      <div class="app-wh-56px app-relative">
        <div class="app-absolute app-hv-center" style="top: 16px;left: 16px">Tips:</div>
        <img class="app-fill" style="object-fit: contain" :src="require('@/assets/ttt/icon.png')" alt="">
      </div>
      <div class="app-flex-1 app-line-height-120 app-v-center">
        {{ activityInfo.activeDesc }}
      </div>
    </div>
    <div class="pl-8 mt-4 mb-2 font-weight-bold">快递详情</div>
    <div v-for="award in awardList" :key="award.id" class="app-round-2 pb-4 mx-4 pt-2 pr-4 app-no-grow-shrink mb-3" style="background: #fff">
      <div class="pl-4 pt-1 app-font-14 font-weight-bold">{{ deliverystatus(award.state) }}</div>
      <div class="app-flex py-2 pl-4">
        <div class="app-wh-72px app-ba-1px-l2 app-round-3">
          <img class="app-fill" :src="award.image" alt="">
        </div>
        <div class="app-flex-1 app-h- pl-4 app-h-between app-column">
          <!--  0：快递收件(揽件)1.在途中 2.正在派件 3.已签收 4.派送失败 5.疑难件 6.退件签收 -->
          <div class="font-weight-bold app-font-14">物流状态({{ deliverystatus(award.state) }})</div>
          <div class="app-flex">{{ award.consigneeName }}<div class="ml-4">奖品名称({{ award.name }})</div></div>
          <div class="app-flex app-font-12 app-ellipsis-2-lines" style="color: #949494">{{ award.nowAddress && award.nowAddress.status }}</div>
        </div>
        <div class="app-h-72px app-v-center">
          <div class="app-wh-24px app-ba-1px-d1 app-hv-center app-circle" style="border-width: 2px !important" @click="goDetail(award.id)">
            <i class="el-icon-more" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { getMobileDispatchs } from '@/api/dispatch'
import { activityDetail } from '@/api/activity'
export default Vue.extend({
  data() {
    return {
      awardList: [],
      pageNo: 1,
      pageSize: 1000,
      activityInfo: {}
    }
  },
  mounted() {
    document.title = '活动奖品物流清单'
    this.getDispatchs()
    activityDetail({ id: Number(this.$route.query.code) }).then(res => {
      if (res.code === 200) {
        this.activityInfo = res.data
      }
    })
    // 调用滑动手势函数
  },
  methods: {
    deliverystatus(status) {
      // 0：快递收件(揽件)1.在途中 2.正在派件 3.已签收 4.派送失败 5.疑难件 6.退件签收
      return status === 0
        ? '快递收件(揽件)'
        : status === 1
          ? '在途中'
          : status === 2
            ? '正在派件'
            : status === 3
              ? '已签收'
              : status === 4
                ? '派送失败'
                : status === 5
                  ? '疑难件'
                  : '退件签收'
    },
    getDispatchs() {
      const params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        activeId: Number(this.$route.query.code)
      }
      getMobileDispatchs(params).then(res => {
        if (res.code === 200) {
          this.awardList = res.data.dataList
          this.total = res.data.total
        }
      })
    },
    goDetail(id) {
      this.$router.push({ name: 'detail',query: { id }})
    }
  }
})
</script>

<style lang="scss" scoped>
.shadow-box {
  box-shadow: 0 0 10px #d4d4d4
}
::v-deep .el-menu-item {
    padding: 0;
    margin: 0 20px;
}
::v-deep .el-collapse-item__arrow {
    margin: 0 12px;
}

.two-line {
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 这里是超出几行省略 */
    overflow: hidden;
}
</style>>

